<template>
  <div class="statistics">
    <vHeader pageTitle="资产统计" :isBack="true"></vHeader>
    <div class="statistics-overview">
      <div class="statistics-overview-circle">
        <div class="vcircle-wrapper">
          <vcircle :amounts='amounts' :totalMoney="totalMoney.toFixed(2)"></vcircle>
        </div>
        <div class="statistics-overview-circle-inner">
          <!--<p>{{ user.acctBalance.toFixed(2) }}</p>-->
          <!--<span>总资产(元)</span>-->
        </div>
      </div>
      <ul>
        <li>
          <span :style="{backgroundColor: '#3faef9'}"></span><strong>持有资产(元)</strong>
          <p>{{ (user.accruedInterest + user.accruedCharges).toFixed(2) }}</p>
        </li>
        <li>
          <span :style="{backgroundColor: '#0069df'}"></span><strong>可用余额(元)</strong>
          <p>{{ user.balance.toFixed(2) }}</p>
        </li>
        <li>
          <span :style="{backgroundColor: '#ff4133'}"></span><strong>提现在途(元)</strong>
          <p>{{ user.drawingMoney.toFixed(2) }}</p>
        </li>
      </ul>
    </div>
    <div class="statistics-info">
      <div class="statistics-info-top">
        <p>出借收益</p>
        <p>{{ (user.cumulativeInterest + user.redEnvelopeIncome + user.interestIncome).toFixed(2) }}</p>
      </div>
      <div class="statistics-info-bottom">
        <ul class="statistics-info-bottom-inner">
          <li>
            <ul class="statistics-info-bottom-item">
              <li>理财收益：{{ user.cumulativeInterest.toFixed(2) }}</li>
              <li><p><span :style="{background: '#ffa923'}"></span><strong>待收本金</strong> {{ user.accruedCharges.toFixed(2) }}</p></li>
              <li><p><span :style="{background: '#ff4133'}"></span><strong>待收利息</strong> {{ user.accruedInterest.toFixed(2) }}</p></li>
            </ul>
          </li>
          <li class="vertical-1px"></li>
          <li>
            <ul class="statistics-info-bottom-item">
              <li>红包收益：{{ (user.redEnvelopeIncome + user.interestIncome).toFixed(2) }}</li>
              <li><p><span :style="{background: '#ffa923'}"></span><strong>红包收益</strong> {{ user.redEnvelopeIncome.toFixed(2) }}</p></li>
              <li><p><span :style="{background: '#ff4133'}"></span><strong>加息收益</strong> {{ user.interestIncome.toFixed(2) }}</p></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <div class="statistics-footer">
      <div class="statistics-footer-top border-1px">
        <div>
          <p>{{ user.registDate.split(' ')[0] }} 注册，您加入分秒金融<span :style="{color: '#ff4133'}">{{ user.joinDays }}</span>天！</p>
        </div>
      </div>
      <div class="statistics-footer-bottom">
        <div class="statistics-footer-bottom-top">
          <ul>
            <li>
              <p>累计出借</p>
              <p>{{ user.cumulativeInvest.toFixed(2) }}</p>
            </li>
            <li class="vertical-1px"></li>
            <li>
              <p>累计收益</p>
              <p>{{ user.cumulativeInterest.toFixed(2) }}</p>
            </li>
          </ul>
        </div>
        <div class="statistics-footer-bottom-mid">
          <ul>
            <li class="border-1px"></li>
            <li></li>
            <li class="border-1px"></li>
          </ul>
        </div>
        <div class="statistics-footer-bottom-bot">
          <ul>
            <li>
              <p>累计充值</p>
              <p>{{ user.cumulativeRecharge.toFixed(2) }}</p>
            </li>
            <li class="vertical-1px"></li>
            <li>
              <p>累计提现</p>
              <p>{{ user.cumulativeDraw.toFixed(2) }}</p>
            </li>
          </ul>  
        </div>        
      </div>
    </div>
  </div>
</template>

<script>
  import vHeader from 'components/common/comHead'
  import vcircle from 'components/circle/waterPolo'

  export default {
    data () {
      return {}
    },
    computed: {
      user () {
        return this.$store.state.user
      },
      amounts () {
        return [this.user.accruedInterest + this.user.accruedCharges, this.user.balance, this.user.drawingMoney]
      },
      totalMoney () {
        return this.user.accruedInterest + this.user.accruedCharges + this.user.balance + this.user.drawingMoney
      }
    },
    created () {
      const acctKey = this.$cookie.get('acctKey')
      this.$store.dispatch('userInfo', acctKey)
    },
    components: {
      vHeader,
      vcircle
    }
  }
</script>

<style lang='scss'>
  @import '../../common/scss/tool.scss';
  @import '../../common/scss/_variable.scss';

  .statistics {
    font-size: 30px;
    color: $base-666;
    &-overview {
      padding: 60px 0;
      background: $base-fff;
      &-circle {
        position: relative;
        width: 100%;
        padding: 0 0 60px 0;
        .vcircle-wrapper {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
        }
        &-inner {
          display: flex;
          flex-direction: column;
          width: 320px;
          height: 320px;
          margin: 0 auto;
          justify-content: center;
          align-items: center;
        }
      }
      ul {
        display: flex;
        justify-content: space-around;
        li {
          span {
            display: inline-block;
            margin-right: 10px;
            width: 16px;
            height: 16px;
            border-radius: 100px;
            line-height: 26px;
          }
          strong {
            font-size: 30px;
          }
          p {
            margin-top: 20px;
            font-size: 30px;
            color: $base-333;
            text-indent: 30px;
          }
        }
      }
    }
    &-info {
      padding: 60px 0;
      background: #fffaf1;
      &-top {
        margin-bottom: 60px;
        text-align: center;
        p:nth-child(1) {
          font-size: 38px;
          margin-bottom: 30px;
        }
        p:nth-child(2) {
          font-size: 58px;
          color: #3faef9;
        }
      }
      &-bottom {
        &-inner {
          display: flex;
          justify-content: center;
          &>li:nth-child(1),
          &>li:nth-child(3) {
            width: 50%;
            flex: 1 0 auto;
          }
          &>li:nth-child(2) {
            width: 0;
            @include vertical-1px(#{$base-e5e5e5});
          }
        }
        &-item {
          display: flex;
          flex-direction: column;
          margin-left: 60px;
          li:nth-child(1) {
            color: $base-ff6c00;
            font-size: 30px;
            margin-bottom: 40px;
          }
          li:nth-child(2) {
            margin-bottom: 30px;
          }
          li:nth-child(2),
          li:nth-child(3) {
            font-size: 30px;
            span {
              display: inline-block;
              line-height: 30px;
              border-radius: 50%;
              width: 20px;
              height: 20px;
              margin-right: 10px;
            }
            strong {
              color: $base-999;
            }
            p {
              color: $base-333;
            }
          }
          
        }
      }
    }
    &-footer {
      background: $base-fff;
      &-top {
        margin: 0 30px;
        @include border-1px(#{$base-e5e5e5});
        height: 126px;
        line-height: 130px;
        text-align: center;
        p {
          font-size: 30px;
        }
      }
      &-bottom {
        &-top>ul,
        &-mid>ul,
        &-bot>ul {
          display: flex;
          align-items: center;
          text-align: center;
          justify-content: center;
        }
        &-top,
        &-bot {
          align-items: center;
          li {
            margin: 60px 0 40px 0;
            height: 100%;
            &>p {
              margin-bottom: 30px;
            }
            p:nth-child(2) {
              font-size: 36px;
              color: $base-333;
            }
          }
          li:nth-child(1) {
            width: 50%;
          }
          li:nth-child(3) {
            width: 50%;
          }
          li:nth-child(2) {
            @include vertical-1px(#{$base-e5e5e5});
            height: 120px;
          }
        }
        &-mid {

          li:nth-child(1),
          li:nth-child(3) {
            width: 30%;
            @include border-1px(#{$base-e5e5e5})
          }          
          li:nth-child(2) {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: $base-e5e5e5;
            margin: 0 60px;
          }          
        }
      }
    }
  }
</style>
